<html xmlns:th="http://www.thymeleaf.org">
<style>
    .layui-form-item .layui-input-inline{
        width: 500px;
    }
    .layui-input {
        width: 90%;
        float:left;
    }
</style>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend th:text="${admin == null}?'管理员录入':'编辑管理员'"></legend>
</fieldset>

<form class="layui-form" action="return false" lay-filter="formUpdate" onsubmit="return false">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">账号</label>
            <div class="layui-input-inline">
                <input type="text" name="account" lay-verify="required|acccountname" autocomplete="off" placeholder="请输入账号" class="layui-input" />
               <i class="layui-icon" style="margin: 10px 0px 0px 10px;display: inline-block;" id="acccounticon"></i>
            </div>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-inline">
                <input type="text" name="name" lay-verify="required" placeholder="请输入名称" autocomplete="off" class="layui-input" />
            </div>
        </div>
    </div>


    <div class="layui-form-item admin_hide">
        <div class="layui-inline">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="password" name="password" lay-verify="password" autocomplete="off" class="layui-input"  />
            </div>
        </div>
    </div>
    <div class="layui-form-item admin_hide">
        <div class="layui-inline">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" name="passwordnew" lay-verify="passwordequest" autocomplete="off" class="layui-input" />
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-inline">
                <div class="layui-upload">
                    <button type="button" class="layui-btn" id="test1">上传图片</button>
                    <input type="hidden" name="imgurl" lay-verify="img"  />
                    <div class="layui-upload-list">
                        <img style="width: 92px; height: 92px; margin: 0 10px 10px 0;" id="demo1" />
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-inline">
                <input type="radio" name="open" value="false" title="关闭" />
                <input type="radio" name="open" value="true" title="开启" checked="true" />
            </div>
        </div>
    </div>

    <div class="layui-form-item menu_hide">
        <div class="layui-inline">
            <label class="layui-form-label">角色</label>
                <div class="layui-input-block">
                    <input type="checkbox" th:each="r,r_index:${role}" name="role[]"   th:attr="name=${'role['+r_index.index+']'},value=${r.id}" th:title="${r.name}"/>
                </div>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="menu">立即提交</button>
        </div>
    </div>
</form>
<script th:inline="javascript">
    /* <![CDATA[*/
    layui.use(['upload','form', 'layedit', 'laydate','element'], function(){
        var form = layui.form;
        var layer = layui.layer;
        var layedit = layui.layedit;
        var laydate = layui.laydate;
        var element=layui.element
            ,upload = layui.upload;
        var URL = /*[[ ${#httpServletRequest.getContextPath()} ]]*/;
        var admin=/*[[ ${admin} ]]*/;

        //自定义验证规则
        form.verify({
            acccountname:[
                /^[\S]{6,20}$/,
                '账号长度不够,6-20位'
            ]
            ,password:function(value,item){
                if(admin ==null && !/^[\S]{6,20}$/.test(value)){
                    return '密码长度范围是6-20';
                }
            }
            ,passwordequest:function(value ,item){
                if(admin == null && value != $("[name='password']").val()){
                    return '两次密码不匹配';
                }
            }
            ,img:function(value){
                if(value == null || value == undefined || $.trim(value).length==0){
                    return '请上传图片';
                }

            }
        });


        var url = URL+'/admin/adminuser/addAdmin';
        if(admin != null){
            form.val("formUpdate", {
                "account":admin.account,
                "name":admin.name,
                "imgurl":admin.imgurl
            })
            if(!admin.open){
                $("[name='open'][value='false']").attr("checked","true");
                $("[name='open'][value='true']").removeAttr("checked");
            }
            $("[name='account']").attr("disabled","disabled");
            var roles = admin.role_ids.split(",");
            for(var id of roles){
                $("[name*='role'][value='"+id+"']").attr("checked","");
            }
            $('#demo1').attr('src', URL+admin.imgurl);
            $(".admin_hide").css("display","none");
            url = URL+'/admin/adminuser/editAdmin';
        }
        //监听提交
        form.on('submit(menu)', function(data){
            if(admin){
                data.field.id=admin.id;
            }
            if($("[name*='role']:checked").size()==0){
                layer.msg('请选择至少一个角色', {icon: 5});
                return false;
            }
            ajaxUtil(url,data.field,function(){
                layer.confirm('操作成功，是否返回列表页面？', {
                    btn: ['确定', '取消']
                }, function(index, layero){
                    layer.close(index);
                    openwindows(URL+'/admin/adminuser/list',null,$)
                }, function(index){
                    layer.close(index);
                });
            });
            return false;
        });

        var uploadInst = upload.render({
            elem: '#test1'
            ,auto:false
            ,size:2048
            ,choose: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result); //图片链接（base64）
                    $("[name='imgurl']").val(result);
                });
            }
        });
        form.render();

    });
    /* ]]> */
</script>
</html>